<template>
    <div class="page">
        <div class="bread">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/product/spu' }">科技专家</el-breadcrumb-item>
                <el-breadcrumb-item>专家详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainbox">
            <!-- 介绍 -->
            <div class="mainbox_top u-p-40">
                <img src="../../assets/首页/tecpeople.png" alt="">
                <div class="mainbox_top_right u-m-l-20">
                    <div class="mainbox_top_right_top">
                        <div>
                            <p class="title">{{ teacherdetail.name }}</p>
                            <p class=" belong u-m-t-10">工作单位：{{ teacherdetail.post }}</p>
                        </div>
                        <div class="twobtn">

                            <!-- <p class="liuyan u-m-l-10 pointer">
                                关注
                            </p> -->
                        </div>
                    </div>
                    <div class="mainbox_top_right_content">
                        <div class="u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth">性别：{{ teacherdetail.sex }}</p>
                            <p class="samewidth">最高学历：{{ teacherdetail.degree }}</p>
                            <p class="samewidth">最高学位：{{ teacherdetail.education }}</p>
                        </div>

                        <div class="u-m-tb-10 mainbox_top_right_content_item">
                            <p class="samewidth">职位职称：{{ teacherdetail.post }}</p>
                            <p class="samewidth">联系电话：{{ teacherdetail.phone }}</p>
                        </div>
                        <div class="mainbox_top_right_content_item">
                            <p class="samewidth">从事专业或方向：动物免疫学</p>
                            <p class="samewidth">主要研发类别：
                                <span v-for="item in teacherdetail.field">{{ item }}，</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <el-divider />
            <!-- 简介 -->
            <div class="reasultdetail ">
                <div class="title">简介</div>
                <p class="u-m-tb-20">
                    {{ teacherdetail.introduction }}
                </p>
            </div>
            <el-divider />
            <!-- 相关成果 -->
            <div class="aboutrequire">
                <div class="title">
                    相关成果
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="aboutrequirebox_item pointer u-p-20" @click="toachdetail(i.id)" v-for="i in userachlist ">
                        <!-- <img :src="i.achImage.path" alt=""> -->
                        <el-image class="elimage" :src="i.achImage.path">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><icon-picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                        <p class="title u-m-tb-10">{{ i.achName }}</p>
                        <p class="grey hidden-1">合作方式：
                            <span v-for="item in i.converMethod">{{ item }}</span>
                            <!-- {{ i.converMethod }} -->
                        </p>
                        <p class="grey u-m-tb-10">项目阶段：
                            <span v-for="item in i.technicalMaturity">{{ item }}</span>
                        </p>
                    </div>
                </div>
            </div>
            <el-divider />

            <!-- 相关需求 -->
            <div class="aboutrequire">
                <div class="title">
                    相关需求
                </div>
                <div class="aboutrequirebox u-m-tb-20">
                    <div class="aboutrequirebox_item pointer u-p-20" @click="todemdetail(i.id)" v-for="i in userdemlist">
                        <!-- <img :src="i.demImage.path" alt=""> -->
                        <el-image class="elimage" :src="i.demImage.path">
                            <template #error>
                                <div class="image-slot">
                                    <el-icon><icon-picture /></el-icon>
                                </div>
                            </template>
                        </el-image>
                        <p class="title u-m-tb-10">{{ i.demName }}</p>
                        <p class="grey">预算资金：{{ i.finance }}万</p>
                        <p class="grey hidden-1 u-m-tb-10">技术领域：
                            <span v-for="item in i.field">{{ item }}，</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import { Picture as IconPicture } from '@element-plus/icons-vue'

import { ArrowRight } from '@element-plus/icons-vue'
import { getteacherdetail, getuserach, getuserdem } from '@/api/user/index'

const route = useRoute()
const $router = useRouter()
onMounted(() => {

})
let id = String(route.query.id)

type teacherdetailType = {
    account?: string,
    address?: string,
    appoint?: any,
    area?: string,
    createTime?: string,
    degree?: string,
    del?: boolean,
    education?: string,
    email?: string,
    enterprise?: string,
    field?: any,
    id?: string,
    introduction?: string,
    name?: string,
    nationality?: string,
    phone?: string,
    post?: string,
    report?: string,
    role?: string,
    sex?: string,
    state?: string,
    type?: string,
    updateTime?: string,
}
const teacherdetail: teacherdetailType = reactive({})
getteacherdetail(id).then(res => {
    Object.assign(teacherdetail, res.data)
    teacherdetail.appoint = JSON.parse(teacherdetail.appoint)
    teacherdetail.field = JSON.parse(teacherdetail.field)
})

const toachdetail = (id:any) => {
    $router.push({
        path: '/acl/achievementdetail',
        query: {
            id: id
        }
    })
}

const todemdetail = (id:any) => {
    $router.push({
        path: '/product/requiredetail',
        query: {
            id: id
        }
    })
}

//用户成果列表
const userachlist: any = ref([])
getuserach(id).then(res => {
    res.data.records.map(item => {
        return item.achImage = JSON.parse(item.achImage)
    })
    // res.data.records.map(item=>{
    //   return item.converMethod = JSON.parse(JSON.stringify(item.converMethod)) 
    // })

    userachlist.value = res.data.records
    console.log(userachlist.value);

})

//用户需求列表
const userdemlist: any = ref([])
getuserdem(id).then(res => {
    res.data.records.map(item => {
        return item.demImage = JSON.parse(item.demImage)
    })
    res.data.records.map(item => {
        return item.field = JSON.parse(item.field)
    })
    userdemlist.value = res.data.records
})

</script>
<style lang="scss" scoped>
@mixin flex {
    display: flex;
    align-items: center;
}

.page {
    background: rgb(250, 248, 259);
    width: 100%;
    padding-top: 30px;


    .bread {
        width: 1180px;
        box-sizing: border-box;
        margin: 0px auto;
    }
}

.mainbox {
    width: 1180px;
    margin: 20px auto;

    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;

    .title {
        font-size: 20px;
        font-weight: bold;
    }

    .mainbox_top {
        @include flex();
        box-sizing: border-box;

        img {
            width: 200px;
            height: 200px;
        }

        .mainbox_top_right {
            width: calc(100% - 200px);

        }

        .mainbox_top_right_top {
            @include flex();
            justify-content: space-between;
            width: 100%;



            .twobtn {
                color: #fff;
                text-align: center;
                font-size: 14px;
                @include flex;

                .collect {
                    background-color: rgb(254, 130, 9);
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                }

                .liuyan {
                    background-color: rgb(5, 96, 263);
                    width: 80px;
                    height: 30px;
                    line-height: 30px;

                }
            }

        }

        .mainbox_top_right_content {
            font-size: 14px;

            .mainbox_top_right_content_item {
                display: flex;

                .samewidth {
                    width: 300px;
                }
            }
        }
    }

    .reasultdetail {
        padding: 0 40px;

        p {
            font-size: 14px;
        }
    }

    .aboutrequire {
        padding: 0 40px;

        .aboutrequirebox {
            @include flex();

            .aboutrequirebox_item {
                box-shadow: 1px 1px 10px 1px #efefef;
                width: 290px;

                // img {
                //     width: 290px;
                //     height: 130px;
                // }

                .elimage {
                    width: 250px;
                    height: 130px;

                    .image-slot {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: #f5f7fa;
                        color: #909399;
                        font-size: 30px;
                    }
                }

                .grey {
                    color: #999;
                    font-size: 14px;
                }

                &:nth-child(n+2) {
                    margin-left: 80px;
                }
            }
        }

        .contentitem {
            padding: 20px;
            margin: 20px;
            background: url('../../assets/首页/technology.png');
            width: 30%;
            background-size: 100% 100%;
            display: flex;
        }

        img {
            width: 100px;
            height: 130px
        }



        .contentitem_text {
            font-size: 16px;

            .level {
                color: #999;
            }
        }
    }
}
</style>